<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="">
		<meta name="author" content="">
		<link rel="icon" href="favicon.ico">
		<title>学掌门后台管理系统</title>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<script src="js/jquery-3.6.0.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/jquery.validate.js"></script>
		<script src="js/mock-min.js"></script>
		<script src="js/server.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("#signupForm").validate({
					rules: {
						password: {
							required: true,
							minlength: 5
						},
						email: {
							required: true,
							email: true
						}
					},
					messages: {
						password: {
							required: "请输入密码",
							minlength: "密码长度至少5个字符"
						},
						email: "请输入有效的邮箱地址"
					},
					errorElement: "em",
					errorPlacement: function(error, element) {
						// Add the `help-block` class to the error element
						error.addClass("help-block");

						if (element.prop("type") === "checkbox") {
							error.insertAfter(element.parent("label"));
						} else {
							error.insertAfter(element);
						}
					},
					highlight: function(element, errorClass, validClass) {
						$(element).parents(".form-group").addClass("has-error").removeClass("has-success");
					},
					unhighlight: function(element, errorClass, validClass) {
						$(element).parents(".form-group").addClass("has-success").removeClass("has-error");
					},
					submitHandler: function() {
						$('#identifier').alert('close');
						const user = {
							email: $('#inputEmail').val(),
							password: $('#inputPassword').val()
						}

						$.ajax({
							url: '/login',
							type: 'post',
							dataType: 'json',
							data: JSON.stringify(user),
							success(data) {
								let r = JSON.parse(data);
								if (r.code == 200) {
									sessionStorage.setItem("nickname", r.result.nickname);
									location.href = "index.html";
								} else {
									$('#exampleModal').modal('show');
								}
							},
							error() {
								console.log("error")
							}
						})
					}
				});
			})
		</script>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-lg-3 col-lg-offset-4">
					<form class="form-signin" id="signupForm">
						<h2 class="text-center">后台管理系统</h2>
						<div class="form-group">
							<label for="inputEmail" class="sr-only">Email address</label>
							<input type="email" id="inputEmail" class="form-control" placeholder="Email" name="email">
						</div>
						<div class="form-group">
							<label for="inputPassword" class="sr-only">Password</label>
							<input type="password" id="inputPassword" class="form-control" placeholder="Password"
								name="password">
						</div>
						<div class="checkbox">
							<label>
								<input type="checkbox" value="remember-me"> 记住我
							</label>
						</div>
						<button class="btn btn-primary btn-block" type="submit">登录</button>
					</form>
				</div>
			</div>
		</div> <!-- /container -->
		<script src="js/ie10-viewport-bug-workaround.js"></script>
		<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
								aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="exampleModalLabel">提示信息</h4>
					</div>
					<div class="modal-body">
						<p class="text-danger">用户名或密码错误</p>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
